<script setup lang="ts" name="UserDetail">
import { getUserApi } from "@/api/system/user";

const { proxy } = getCurrentInstance();

const { sys_user_sex, sys_normal_disable } = useDict("sys_user_sex", "sys_normal_disable")

const emit = defineEmits(['closeDialog']);

const props = defineProps({
  id: {
    default: null,
  },
  title: {
    type: String,
    default: false,
  }
})
const open = ref(false);

const form = ref<UserRecord>({});

const postList = ref<PostRecord[]>([]);

/** 获取用户详情 */
function getData() {
  if (props.id || props.id === 0) {
    getUserApi(props.id).then(response => {
      form.value = response.data;
      form.value.postIds = response.postIds;
      postList.value = response.posts;
      open.value = true;
    }).catch(() => {
      closeDialog(false);
    })
  } else {
    open.value = true;
  }
}

/** 岗位列表映射 */
function postFormat(postIds: number[]){
  let names = [];
  postIds.forEach(postId => {
    let name = postList.value.find(item => item.postId == postId)?.postName;
    if(name){
      names.push(name);
    }
  })
  return names.toString();
}

/** 角色列表映射 */
function roleFormat(roleIds: RoleRecord[]){
  let names = roleIds.map(item => item.roleName);
  return names.toString();
}

/** 关闭弹窗 */
function closeDialog(refresh: boolean) {
  open.value = false;
  emit("closeDialog", refresh);
}

watch(open, (val) => {
  if (!val) {
    closeDialog(false);
  }
})

getData();
</script>
<template>
  <!-- 用户详情对话框 -->
  <el-dialog :title="title" v-model="open" width="700px" append-to-body>
    <div class="detail-form">
      <el-form ref="userForm" :model="form" label-width="80px">
        <el-form-item label="用户昵称" prop="nickName">
          {{ form.nickName }}
        </el-form-item>
        <el-form-item label="用户名称" prop="userName">
          {{ form.userName }}
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          {{ form.email }}
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          {{ form.phonenumber }}
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <dict-tag :options="sys_user_sex" :value="form.sex" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <dict-tag :options="sys_normal_disable" :value="form.status" />
        </el-form-item>
        <el-form-item label="部门" prop="dept">
          {{ form.dept?.deptName }}
        </el-form-item>
        <el-form-item label="岗位列表" prop="postIds">
          {{ postFormat(form.postIds) }}
        </el-form-item>
        <el-form-item label="角色列表" prop="roles">
          {{ roleFormat(form.roles) }}
        </el-form-item>
        <el-form-item label="登陆时间" prop="loginDate">
          {{ parseTime(form.loginDate) }}
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          {{ form.createTime }}
        </el-form-item>
        <el-form-item label="备注" prop="remark" class="item-describe">
          {{ form.remark }}
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog(false)">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>

</style>